<template>
	<div>
		<!-- 属性也是组件中指定好的 -->
		<scroller height='-46px' lock-x use-pullup use-pulldown :pullup-config='pullupconfig' :pulldown-config='pulldownconfig'
		 @on-pullup-loading='load' ref='pullup' @on-pulldown-loading='loads'>

			<!-- 使用vux组件  cell必须在Group中使用 里面的属性都是组件给定的-->
			<group>
				<cell v-for="(i,index) in list" :key="index" is-link :link="'/topic/'+i.id">
					<!-- 使用插槽来显示右边的内容 -->
					<span slot='title' class="cell_title">
						<span class="reply_count">
							{{i.reply_count}}
						</span>
						/
						<span class="visit_count">
							{{i.visit_count}}
						</span>
						<span v-if="i.top" class="top">
							置顶
						</span>
						<span class="tab">
							{{gettopics(i.tab)}}
						</span>
						<span class="title">
							{{i.title}}
						</span>
					</span>
					<span slot='icon' class="aut-img">
						<img :src="i.author.avatar_url" alt="">
					</span>
				</cell>
			</group>
		</scroller>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	//引入vux组件 cell必须在Group中使用
	import {
		Cell,
		Group,
		Scroller,
		Tab,
		TabItem,
	} from 'vux'
	export default {
		props: ['name'],
		data: function() {
			return {
				list: [],
				page: 1, //当前页数
				limit: 5, //每页显示的个数
				//滚动条上拉显示
				pullupconfig: {
					content: '上拉加载更多',
					downContent: '松开进行加载',
					upContent: '上拉加载更多',
					loadingContent: '加载中...'
				},
				pulldownconfig: {
					content: '上拉加载更多',
					downContent: '松开进行加载',
					upContent: '上拉加载更多',
					loadingContent: '加载中...'
				},
			}
		},
		components: { //注册vux组件
			Cell,
			Group,
			Scroller,
			Tab,
			TabItem,
		},
		computed: {
			...mapState(['topics']),
		},
		methods: {
			//根据tab获取中文显示
			gettopics(tab) {
				return this.$store.getters.gettopic(tab)
			},
			//上拉加载更多触发的方法
			load: function() {
				var this2 = this;
				this.page = this.page + 1;
				this.$http.get('/topics', {
					params: {
						tab: this.name,
						page: this.page,
						limit: this.limit
					}
				}).then(function(res) {
					//ES6语法 拼接数组 对象展开运算符 ... 会遍历其后面的数组
					this2.list.push(...res.data.data)
					//js concat数组拼接
					// this2.list=this2.list.concat(res.data.data)

					//手动结束上拉刷新事件
					//使用 refs 属性池 父组件获取子组件
					this2.$refs.pullup.donePullup();
				})
			},
			//下拉刷新
			loads: function() {
				var app = this;
				this.$http.get('/topics', {
					params: {
						tab: this.name,
						page: 1,
						limit: this.limit
					}
				}).then(function(res) {
					app.list = res.data.data;
					//手动结束 下拉刷新事件
					app.$refs.pullup.donePulldown();
				})
			},
		},
		//发送ajax请求，获取数据，显示在页面中
		//axios 动态路由组件
		//1 created + watch
		//2 路由导航守卫 beforeRouteEnter进入之前不能使用this beforeRouteUpdate
		beforeRouteEnter: function(to, from, next) {
			//to 表示将进入的路由文件
			//from 表示即将离开的路由组件
			//next 表示继续执行下一步
			next(function(vm) {
				//参数vm表示当前组件的实例对象
				vm.$http.get('/topics', {
					params: { //发送请求时，传递的参数
						tab: to.params.name,
						page: vm.page,
						limit: vm.limit
					}
				}).then(function(res) {
					vm.list = res.data.data; //拿到接口中的值
					console.log(vm.list)
				})
			})
		},
		//动态路由切换时的导航守卫
		beforeRouteUpdate: function(to, from, next) {
			var this1 = this;
			//可以使用this表示当前组件
			this.$http.get('/topics', {
				params: {
					tab: to.params.name,
					page: this.page,
					limit: this.limit
				}
			}).then(function(res) {
				//由于异步请求，this指向有问题，所以需要提前存储
				this1.list = res.data.data;
				console.log(this1.list);
			})
			next();
		}
	}
</script>

<style>
	.cell_title {
		font-size: .8rem;

	}

	.cell_title .reply_count {
		color: #9e78c0;
	}

	.cell_title .visit_count {
		color: #b4b4b4;
	}

	.cell_title .top {
		background: #80bd01;
		padding: 2px 4px;
		color: #fff;
		font-size: 12px;
	}

	.cell_title .tab {
		background-color: #e5e5e5;
		color: #999;
		padding: 2px 4px;
		border-radius: 3px;
		font-size: 12px;
	}

	.aut-img img {
		width: 30px;
		height: 30px;
		border-radius: 3px;
		margin-right: 5px;
		margin-top: 0;
	}
</style>
